import React ,{Component} from 'react';
import TipsView from './components/TipsView';
import './lib/js/unity'
import './lib/css/reset.css';
import './App.less';

class Register extends Component {
  constructor(props) {
    super(props)
    this.state = {
      phone: this.props.phone || '',
      phone_code: this.props.phone_code || '',
      count: 60,
      isGetCode: true,
      openGetCode:false, //是否可以发送验证码
      isShowTipsView:false //是否展示底部错误弹框提示
    }

    this.handleSendCode = this.handleSendCode.bind(this)
    this.handleDelPhone = this.handleDelPhone.bind(this)
    this.onCloseTips = this.onCloseTips.bind(this)
    this.handleSubmitClick =this.handleSubmitClick.bind(this)
    this.handleInputChange = this.handleInputChange.bind(this)
  }

  //获取短信验证码
  handleSendCode = () => {
    if (!this.state.isGetCode) {
      return
    }
    if(this.state.phone === '') {
      alert('请先输入手机号')
      return
    } else if(!(/^1[34578]\d{9}$/.test(this.state.phone))) {
      alert('手机号格式不正确')
      return
    } else {
      console.log("点击获取验证码，请求后台api接口")

      let count = this.state.count
      console.log(count)
      const timer = setInterval(() => {
        this.setState({ count: (count--), isGetCode: false }, () => {
          if (count === 0) {
            clearInterval(timer);
            this.setState({
              isGetCode: true ,
              count: 60
            })
          }
        });
      }, 1000);
    }
  } 

  onCloseTips(vals){
    this.setState({
      isShowTipsView:vals
    })
  }

  handleInputChange(event) {
    const target = event.target;
    const name = target.name;
    const value = target.value;
    if(name=='phone'){
      this.setState({
        phone: value,
        openGetCode:value.length==11?true:false
      }, () => {

      })
    }else if(name=='phone_code'){
      this.setState(() => ({
        phone_code: value
      }))
    }
  }

  handleDelPhone(){
    this.setState({
      phone: '',
      openGetCode:false
    })
  }

  handleSubmitClick(){
    if(this.state.phone&&this.state.phone_code){
      this.setState({
        isShowTipsView:true
      })

      const tipsTimer=setTimeout(()=>{
        this.setState({
          isShowTipsView:false
        })
        clearTimeout(tipsTimer);
      },5000)
    }
  }

  render() {
    return (
        <div className="user_register">
          <div className="register_box">
            <div className="login_content">
              <h4 className="register_title">手机验证</h4>
              <div className="phone_number">
                <p>手机号</p>
                <input type="tel" placeholder="" maxLength="11" name="phone" value={this.state.phone} onChange={this.handleInputChange} />
                <span className="phone_number_del" style={{display:this.state.phone.length>0?'block':'none'}} onClick={this.handleDelPhone}>x</span>
              </div>
              <div className="vscode_message">
                <div className="vscode_title">
                  <p>验证码</p>
                </div>
                <div className="get_receive_vscode">
                  <p onClick={this.handleSendCode}  className={this.state.openGetCode?'get_receive_vscode_Active':''}>
                    {
                      this.state.isGetCode ? 
                      <span>获取验证码</span>
                      : 
                      <span className="count_second">{this.state.count + '秒后重新获取'}</span> 
                    }
                  </p>
                  <input type="tel" placeholder="" maxLength="11" name="phone_code" value={this.state.phone_code} onChange={this.handleInputChange} />
                </div>
              </div>
              <button className={(this.state.phone&&this.state.phone_code)?'button_submit':'button_submit button_submit_Active'}type="button" onClick={this.handleSubmitClick}>下一步</button>
            </div>
          </div>
          <TipsView tipsContent='验证码输入有误' isShow={this.state.isShowTipsView} onCloseTips={this.onCloseTips}></TipsView>
        </div>
    )
  }
}

export default Register